<template>
	<div class="addSite" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="添加地址"></back-header>
		<div class="addSite-warp">
			<section class="addrss-box">
	            <label class="addrss-item">
	                <span>收货人：</span>
	                <input type="text" id="name" placeholder="请填写收件人姓名" v-model="username">
	            </label>
	            <label class="addrss-item">
	                <span>联系电话：</span>
	                <input type="number" id="phone" placeholder="请填写手机" v-model="phone">
	            </label>
	            <label class="addrss-item" id="select_contact">
	                <span class="inline-block">所在地区：</span>
	                <div class="inline-block" style="width: 70%">
	                    <input type="text" id="region" placeholder="请填写省市区县" v-model="region">
	                </div>
	            </label>
	            <label class="addrss-item">
	                <span>详细地址：</span>
	                <input type="text" id="address" placeholder="街道、楼牌号等" v-model="address">
	            </label>
	        </section>
	        <p class="msg" style="text-align: center;font-size:14px;color:red;height:20px;">{{msg}}</p>
	        <button type="button" class="btn btn-green" @click="addressSub">保存</button>
		</div>
	</div>
</template>

<script type="text/javascript">
	import backHeader from '../components/backHeader'
	export default{
		name:"addSite",
		components:{backHeader},
		data(){
			return {
				username:"",
				phone:"",
				region:"",
				address:"",
				msg:""
			}
		},
		methods:{
			addressSub(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/address/createUserAddress`,{
					'name':this.username,
					'phone':this.phone,
					'region':this.region,
					'address':this.address,
					'token':this.$store.state.userInfo.token
				}).then((response) => {
		              console.log(response)
		              if(response.code == "0"){
		              		this.msg = "添加成功"
		              		setTimeout(() =>{
		              			this.$router.go(-1);
		              		},1000)
		              }else{
		              	this.msg = response.msg;
		              }
		  		 })
			}
		}
	}
</script>

<style lang="less" scoped>
	.addSite-warp{
		width:100%;
		background:#fff;
	}
	.addSite-warp .addrss-box {
	    width: 92%;
	    margin: 10px auto;
	    font-size:14px;
	}
	.addSite-warp .addrss-item {
	    background: #fff;
	    padding: 20px 10px;
	    border-bottom: 1px solid #f2f2f2;
	    display: block
	}

	.addSite-warp .addrss-box .addrss-item-top {
	    margin-top: 10px;
	    border-top-right-radius: 5px;
	    border-top-left-radius: 5px
	}

	.addSite-warp .addrss-box .addrss-item-bottom {
	    border-bottom-right-radius: 5px;
	    border-bottom-left-radius: 5px;
	    border: none
	}

	.addSite-warp .addrss-item input {
	    -webkit-appearance: none;
	    border: none;
	    background: 0 0;
	    outline: 0;
	    width: 200px;
	    font-size:14px;
	}
	.addSite-warp .addrss-item .icon-rightrow {
	    width: 11px;
	    vertical-align: middle;
	}

</style>